<template>
  <!-- <div id="data-echarts"> -->
  <div id="chart">
    <div class="top">
      <div
        class="left-side"
        style="
          width: 30%;
          height: 99%;
          border-radius: 10px;
          background-color: #00;
        "
      >
        <div
          class="userinfo-box"
          style="
            width: 100%;
            height: 29%;
            background-color: #fff;
            border-radius: 10px;
          "
        >
          用户信息
        </div>
        <div
          class="date-box"
          style="
            width: 100%;
            height: 70%;
            background-color: #fff;
            border-radius: 10px;
          "
        >
          <!-- 日历 -->
          <el-calendar
            v-model="value"
            style="height: 100%; width: 100%"
          ></el-calendar>
        </div>
      </div>
      <div
        class="right-side"
        style="width: 68%; height: 99%; border-radius: 10px"
      >
        <div
          class="center-top"
          style="
            width: 100%;
            height: 49%;
            background-color: #fff;
            border-radius: 10px;
            background-color: #00;
          "
        >
          <div
            class="center"
            style="
              width: 40%;
              height: 100%;
              background-color: #fff;
              border-radius: 10px;
              display: flex;
              background-color: #00;
            "
          >
            <div
              class="welcome-box"
              style="
                width: 100%;
                height: 49%;
                background-color: #fff;
                border-radius: 10px;
              "
            >
              早上好
            </div>
            <div
              class="weather-box"
              style="
                width: 100%;
                height: 49%;
                background-color: #fff;
                border-radius: 10px;
              "
            >
              天气
            </div>
          </div>
          <div
            class="inform-box"
            style="
              width: 59%;
              height: 100%;
              background-color: #fff;
              border-radius: 10px;
            "
          >
            通知公告
          </div>
        </div>
        <div
          class="center-bottom"
          style="
            width: 100%;
            height: 50%;
            background-color: #fff;
            border-radius: 10px;
          "
        >
          仪表
        </div>
      </div>
    </div>
    <div
      class="bottom"
      style="
        width: 100%;
        height: 33%;
        background-color: #00;
        border-radius: 10px;
      "
    >
      <div
        class="line-data"
        style="
          width: 49%;
          height: 95%;
          background-color: #fff;
          border-radius: 10px;
        "
      >
        折线图
      </div>
      <div
        class="pie-data"
        style="
          width: 49%;
          height: 95%;
          background-color: #fff;
          border-radius: 10px;
        "
      >
        饼图
      </div>
    </div>
  </div>
  <!-- </div> -->
</template>

<style lang="less" scoped>
.date-box {
  ::v-deep .el-calendar__header {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  ::v-deep .el-calendar__body {
    // padding-top: 0;
    // padding-bottom: 0;
    font-size: 12px;
    ::v-deep .el-calendar-table {
      font-size: 12px;
      thead {
        font-size: 12px;
        th {
          font-size: 12px;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
      ::v-deep tbody {
        font-size: 12px;
        ::v-deep tr.el-calendar-table__row {
          //   font-size: 12px;
          ::v-deep td {
            font-size: 12px;
            ::v-deep .el-calendar-day {
              //   font-size: 14px;
              height: 10px !important;
              padding-top: 0;
              padding-bottom: 0;
              background-color: #4c67ff;
            }
          }
        }
      }
    }
  }
}

canvas {
  width: 100% !important;
  height: 100% !important;
}
#chart {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, #4c67ff, #5635df);
  .top {
    width: 100%;
    height: 67%;
    border-radius: 10px;
    display: flex;
    justify-content: space-evenly;
    padding-top: 0.5%;
    .right-side {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .center-bottom {
        flex-direction: row;
      }
      .center-top {
        display: flex;
        justify-content: space-between;
        .center {
          justify-content: space-between;
          flex-direction: column;
        }
      }
    }
    .left-side {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-evenly;
  }
}
</style>

<script>
import http from "@/utils/request";
import * as echarts from "echarts";

export default {
  id: "5",
  meta: {
    name: "数据统计",
    title: "sjtj",
    icon: "iconfont icon-shuju2",
  },
  data() {
    return {
      value: new Date(),
      lineData: [
        { value: 90, name: "css" },
        { value: 90, name: "css" },
        { value: 90, name: "css" },
        { value: 90, name: "css" },
        { value: 90, name: "css" },
      ],
    };
  },
  beforeMount() {},
  mounted() {
    this.$nextTick(function () {
      let lineChart = echarts.init(document.querySelector(".line-data"));
      lineChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false,
          data: ["css", "js", "vue", "react", "node"],
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [],
      });
      http.get("/data/rate.json").then((res) => {
        if (res.data.state) {
          res.data.data.forEach((item, index) => {
            this.lineData[index].value = item.rate;
            this.lineData[index].name = item.name;
          });
          lineChart.setOption({
            series: [
              {
                type: "line",
                smooth: true,
                data: [...this.lineData],
                label: {
                  show: true,
                },
              },
            ],
          });
        }
      });

      let pieChart = echarts.init(document.querySelector(".pie-data"));
      pieChart.setOption({
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          // trigger: 'item'
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [],
      });
      http.get("/data/tarsk.json").then((res) => {
        if (res.data.state) {
          pieChart.setOption({
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                //   radius: "50%",
                data: res.data.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        }
      });

      let taskChart = echarts.init(document.querySelector(".center-bottom"));
      taskChart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [],
      });

      http.get("/data/expect.json").then((res) => {
        if (res.data.state) {
          let sdata = res.data.data.map((item) => {
            return {
              value: item.rate,
              name: item.title,
            };
          });
          taskChart.setOption({
            series: [
              {
                name: "Access From",
                type: "pie",
                radius: ["40%", "70%"],
                avoidLabelOverlap: false,
                label: {
                  show: true,
                  position: "center",
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: "40",
                    fontWeight: "bold",
                  },
                },
                labelLine: {
                  show: false,
                },
                data: sdata,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
        }
      });
      http
        .get("/weather/getWeather", { params: { key: null, city: "nanjing" } })
        .then((res) => {
          console.log(res);
        });

      window.onresize = function () {
        lineChart.resize();
        taskChart.resize();
        pieChart.resize();
      };
    });
  },
};
</script>
